<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<title>JSF 2.0 + Ajax Hello World Example</title>
	<h:outputStylesheet library="bootstrap" name="css/bootstrap.min.css" />
	<h:outputScript library="bootstrap" name="js/bootstrap.js" />	
	<h:outputScript library="bootstrap" name="js/jquery.js" />
<script type="text/javascript">
	function callAjaxServlet() {
		$.ajax({
			url: "#{app.appPath}/callajax?type=test",
			type: 'get',
			data: {
				"choices" : ["Jon","Susan"] 
			},
			async: false,
			dataType: 'text',
			success:function(data) {
				alert(data);
			}
		});
	}
</script>	
</h:head>

<h:body>
	<h3>JSF 2.0 + Ajax Hello World Example</h3>	
	
	<h:form>
		<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
		<h:commandButton value="Welcome Me" class="btn btn-primary">
			<f:ajax execute="name" render="output" />
			<f:param name="country" value="China" />
		</h:commandButton>

		<h2>
			<h:outputText id="output" value="#{helloBean.sayWelcome}" />
		</h2>
		<input type="button" onclick="callAjaxServlet();" class="btn btn-primary" value="Call Ajax Servlet" />			
	</h:form>
	
	
	
</h:body>

</html>